<template>
  <div class="wrap">
    <div class="title">找回余额支付密码</div>
    <div class="content">
      <div class="item">
        <em>设置密码</em>
        <input
          type="password"
          placeholder="请输入要设置的新密码"
          v-model="newPassword"
          class="orginPassword"
        />
      </div>
      <div class="item" style="border: 0px">
        <em>确认密码</em>
        <input
          type="password"
          placeholder="再次输入新密码"
          v-model="sureNewpassword"
          class="orginPassword"
        />
      </div>
    </div>
    <div class="btnSure" @click="sureBtn">确认</div>
  </div>
</template>

<script>
import { Field } from "vant";
import { apiAppUserInfo } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      orginalPassword: "", //初始密码
      newPassword: "", //新密码
      sureNewpassword: "", //确认新密码
      userInfo: "",
    };
  },
  created() {},
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
  },
  methods: {
    sureBtn() {
      if (this.newPassword != this.sureNewpassword) {
        this.$toast.fail("两次输入的密码不一致请重新输入");
        return;
      } else if (this.newPassword == "") {
        this.$toast.fail("请先填写要设置的新密码");
        return;
      }
      this.$router.push({
        path: "/pages/bsetPasswordCode",
        query: {
          //传递参数
          passWord: this.newPassword,
        },
      });
    },
  },
  components: {
    [Field.name]: Field,
  },
};
</script>

<style scoped>
.title {
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  padding: 20px;
}
.content {
  width: 93%;
  background: #ffffff;
  border-radius: 20px;
  margin: 0 auto;
  padding-bottom: 20px;
}
.item {
  overflow: hidden;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ddd;
  width: 80%;
  margin: 0 auto;
}
em {
  display: inline-block;
  float: left;
  width: 90px;
}
.orginPassword {
  float: left;
  width: 58%;
  margin-left: 20px;
}
input {
  border: 0px;
}
input::placeholder {
  font-size: 12px;
  font-weight: 300;
  color: #999999;
}
.forgetPassword {
  font-size: 12px;
  text-align: right;
  color: #fc7817;
  margin-top: 20px;
  margin-right: 20px;
  font-weight: 600;
}
.btnSure {
  width: 95%;
  position: fixed;
  left: 2.5%;
  bottom: 20px;
  height: 50px;
  line-height: 50px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}
</style>
